const { default: styled } = require("styled-components");

const HeaderWrapper = styled.div`
  width: 100%;
  min-width: 500px;
  background-color:var(--themeColorv1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 50px;
  padding-left: 20px;
  box-sizing: border-box;
  .fiexd{
    position: absolute;
    color: gray;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 999999;
    .ant-alert-warning{
      padding: 20px;
      background-color: rgba(70,70,70,0.6);
      border-color: rgb(70,70,70);
      .ant-alert-message{
        color: white;
        font-size: 20px;
      }
    }
  }
  .left {
    display: flex;
    .search {
        margin-left: 20px;
        width: 200px;
        position: relative;
        .hotSearch{
          position: absolute;
          bottom: -300px;
          left: -5px;
          z-index: 9999999999;
          width: 300px;
        background-color: red;

          border-radius: 10px;
          box-sizing: border-box;
          background-color: rgb(255,255,255);
          overflow: hidden;
          padding: 10px;
          li{
            box-sizing: border-box;
            background-color: rgb(255,255,255);
            padding: 10px;
            display: flex;
            justify-content: space-between;
            cursor: pointer;
            span{
              &:first-child{
                font-weight: 555;
              }
              &:last-child{
                font-size: 12px;
                color: gray;
              }
            }
            &:nth-child(n+2):hover{
              background-color: rgba(70,70,70,0.2);
            }
            &:first-child{
              border-bottom: 1px solid rgba(70,70,70,0.1);
              margin-bottom: 5px;
            }
          }
        }
        }
    .route {
      color: gray;
      font-size: 20px;
      .route_right {
        margin:0 30px 0 10px;
      }
      .route_left:hover,
      .route_right:hover{
        color: rgb(30, 206, 155);
      }
      }
    }
    .right {
      .module{
        margin-right: 20px;
      }
    }
  }
`;

export default HeaderWrapper;
